<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>OpenUBA - Home</title>
  <meta name="description" content="OpenUBA">
  <meta name="author" content="OpenUBA">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


  <style> /* set the CSS */

    body { font: 12px Arial;}

    path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

  </style>
</head>

<body>

  <!-- navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">OpenUBA</a>
    <button class="navbar-toggler" type="button"
    data-toggle="collapse"
    data-target="#navbarNavAltMarkup"
    aria-controls="navbarNavAltMarkup"
    aria-expanded="false"
    aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">
          Dashboard <span class="sr-only">(current)</span>
        </a>
        <a class="nav-item nav-link" href="/data">
          Data
        </a>
        <a class="nav-item nav-link" href="/modeling">
          Models
        </a>
        <a class="nav-item nav-link" href="/anomalies">
          Anomalies
        </a>
        <a class="nav-item nav-link" href="/cases">
          Cases
        </a>
        <a class="nav-item nav-link" href="/settings">
          Settings
        </a>
      </div>
    </div>
    <form class="form-inline">
      <a class="nav-item nav-link disabled" href="#">
        Username
      </a>
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
        Search
      </button>
    </form>
  </nav>
  <!-- end navigation -->


  <!-- system log -->
  <div class="container">
    <div class="row">
      <div class="col-sm" id="system_log">
        <div class="card">
          <div class="card-body">
            <SystemLog></SystemLog>
          </div>
        </div>
      </div>
    </div>
    <!-- end system log -->


  <div class="container">
    <div class="row">
      <div class="col-sm">
        <hr>
      </div>
    </div>
    <div class="row">
      <div class="col-sm">
        <div class="card">
          <div class="card-body">
            <h2><b>Summary</b></h2>
            <hr>
            <div class="row">
              <div class="col-sm">
                <h5>
                  Monitored Users:
                  <span class="badge badge-info">100</span>
                </h5>
              </div>
              <div class="col-sm">
                <h5>
                  High Risk:
                  <span class="badge badge-info">100</span>
                </h5>
              </div>
              <div class="col-sm">
                <h5>
                  Users Discovered from events:
                  <span class="badge badge-info">100</span>
                </h5>
              </div>
              <div class="col-sm">
                <h5>
                  Users imported from directory:
                  <span class="badge badge-info">100</span>
                </h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>




  <div class="container">

    <div class="row">
      <div class="col-sm">
        <hr>
      </div>
    </div>

    <div class="row">

      <!-- monitored users -->
      <div class="col-sm-4">
          <p>Monitored Users</p>
          <ul class="list-group">
              <li class="list-group-item d-flex justify-content-between align-items-center">
                User 1
                <p>Score: <span class="badge badge-danger badge-pill">14</span></p>
              </li>
              <li class="list-group-item d-flex justify-content-between align-items-center">
                User 2
                <p>Score: <span class="badge badge-warning badge-pill">14</span></p>
              </li>
              <li class="list-group-item d-flex justify-content-between align-items-center">
                User 3
                <p>Score: <span class="badge badge-info badge-pill">14</span></p>
              </li>
          </ul>
      </div>

      <div class="col-sm-8">
        <div class="card">
          <div class="card-body">

            <!-- recent offenses -->
            <div class="row">
              <div class="col-sm-5" style="border: 0px solid black;">
                    <p>Recent Offenses</p>
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                          <p>Offense 1</p>
                          <p>Score: <span class="badge badge-warning badge-pill">14</span></p>

                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                          <p>Offense 2</p>
                          <p>Score: <span class="badge badge-warning badge-pill">14</span></p>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                          <p>Offense 3</p>
                          <p>Score: <span class="badge badge-info badge-pill">14</span></p>
                        </li>
                    </ul>
              </div>

              <!-- recent offenses graph-->
              <div class="col-sm-7" style="border: 0px solid black;">
                <div id="d3_main"></div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="container">

    <div class="row">
      <div class="col-sm">
        <hr>
      </div>
    </div>

    <div class="row">

      <div class="col-sm-6">
        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"><!--active-->
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">List group item heading</h5>
              <small>3 days ago</small>
            </div>
            <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            <small>Donec id elit non mi porta.</small>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">List group item heading</h5>
              <small class="text-muted">3 days ago</small>
            </div>
            <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            <small class="text-muted">Donec id elit non mi porta.</small>
          </a>
        </div>
      </div>

      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            This is some text within a card body.
          </div>
        </div>
      </div>

    </div>
  </div>



  <div class="container">
    <div class="row">
      <div class="col-sm">
        <hr>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            This is some text within a card body.
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="card">
          <div class="card-body">
            This is some text within a card body.
          </div>
        </div>
      </div>
    </div>
  </div>

  <br><br><br>

  <div class="container">
    <div class="row">
      <div class="col-sm">
        <hr>
      </div>
    </div>
  </div>


  <!-- load the d3.js library -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/d3js/5.15.0/d3.min.js"></script> -->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="js/index.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
